<template>
  <div id="centerQueryfile">
    <div class="fileBtn">
      <button @click="portrait">选择PDF文件</button>
      <input type="file" class="img_input" ref="portrait" @change="selectpdf">
    </div>
    <div class="messageSwdy">中登信息</div>
    <div class="tableBox" v-if="queryData">
      <table class="leave">
        <tr>
          <td style="min-width: 140px;">登记证明编号</td>
          <td>{{queryData.regNo}}</td>
          <td>登记时间</td>
          <td>{{queryData.regDate}}</td>
        </tr>
        <tr>
          <td>填表人名称</td>
          <td>{{queryData.fillName}}</td>
          <td>转让财产价值</td>
          <td>{{queryData.transValue}}</td>
        </tr>
        <tr>
          <td>转让财产描述</td>
          <td
            colspan="3"
            v-text="queryData.transDesc"
            style="text-align: left; padding-left: 20px; padding-right: 20px;"
          ></td>
        </tr>
      </table>
    </div>
    <div class="fileBtn">
      <button @click="choosegy">选择供应商</button>
    </div>
    <div class="messageSwdy">资产信息</div>
    <div class="tableBox" v-if="zichanData">
      <table class="leave">
        <tr>
          <td>供应商名称</td>
          <td>{{zichanData.companyName}}</td>
          <td>发票金额</td>
          <td>{{zichanData.invoiceValue}}</td>
        </tr>
        <tr>
          <td>基础交易票据转让金额</td>
          <td>{{zichanData.transferAmount}}</td>
          <td>乐税查验</td>
          <td>{{zichanData.lsCheck}}</td>
        </tr>
        <tr>
          <td>中登查验备注</td>
          <td colspan="3" style="padding: 10px 20px;">
            <el-input type="textarea" :rows="2" placeholder="请输入操作人员备注信息" v-model="remark"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottomBtn">
      <button @click="chayan(1)">查验完成</button>
      <button @click="chayan(0)">查验不通过</button>
    </div>
    <el-dialog :visible.sync="dialogTable" width="900px">
      <div class="swdyTops">
        <span class="search">搜索公司：</span>
        <el-input class="elinput" size="small" placeholder="请输入公司关键字" v-model="search"></el-input>
        <span class="sousuo">搜索不到？</span>
        <el-button class="gocreat" size="small" type="primary" @click="goChuangjian">去创建</el-button>
      </div>
      <div class="diatable">
        <el-table :data="diatableData" border style="width: 100%">
          <el-table-column prop="clientId" label="序号" align="center"></el-table-column>
          <el-table-column prop="companyName" label="客户名称" align="center"></el-table-column>
          <el-table-column prop="tradeValue" label="交易票据金额" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $axios from "axios";
export default {
  name: "centerQueryfile",
  data() {
    return {
      dialogTable: false,
      diatableData: [],
      currentPage: 1,
      file: "",
      queryData: "",
      search: "",
      total: null,
      zichanData: "",
      zdInfoId: "",
      clientId: "",
      remark: ""
    };
  },
  methods: {
    goChuangjian() {
      this.$router.push("home/enterInfo");
      this.dialogTable = false;
    },
    choosegy() {
      this.dialogTable = true;
      this.getList(1);
    },
    // 弹窗供应商公司列表
    getList(val) {
      this.currentPage = val;
      let obj = {
        companyName: this.search,
        page: this.currentPage
      };
      this.axios
        .get("AdminAPI/zdCheck/queryClientInfo", {
          params: this.filterNoneObj(obj)
        })
        .then(({ data }) => {
          this.diatableData = data.data;
          this.total = data.pageInfo.total;
        });
    },
    // 弹窗的选择
    choose(data) {
      this.dialogTable = false;
      this.getzichan(data.clientId);
      this.clientId = data.clientId;
    },
    // 查看资产详情
    getzichan(id) {
      this.axios
        .get("AdminAPI/zdCheck/showClientReceiptInfo", {
          params: { clientId: id }
        })
        .then(({ data }) => {
          this.zichanData = data.data;
        });
    },
    portrait: function() {
      this.$refs.portrait.click(); // 获取ref为portrait的元素相当于获取id为portrait的元素
    },
    selectpdf: function(e) {
      this.file = e.target.files[0]; // 获取文件的所有属性
      if (this.file.type !== "application/pdf") {
        this.$message({
          message: "请选择pdf文件",
          type: "warning"
        });
        return false;
      }
      let fm = new window.FormData(); // 创建一个表单
      fm.append("file", this.file); // apend到这个字段,后台凭证接受的字段
      // fm.append("ids", this.$route.query.id); // apend到这个字段，后台id接受的字段
      $axios
        .post(`${this.$bus.baseURL}AdminAPI/zdCheck/uploadPdf`, fm, {
          headers: { "Content-Type": "multipart/form-data" },
          token: sessionStorage.getItem('token')
        })
        .then(({ data }) => {
          if (data.code == 200) {
            let num = Number(data.data);
            if (!num) {
              this.$message({ message: data.data, type: "warning" });
            } else {
              this.zdInfoId = num;
              this.getMessage(num);
            }
          } else {
            this.$message({
              message: "上传失败,请核查你上传的文件是否正确",
              type: "warning"
            });
          }
        });
    },
    // 查看中登查询信息详情
    getMessage(num) {
      this.axios
        .get("AdminAPI/zdCheck/showZDInfo", { params: { id: num } })
        .then(({ data }) => {
          if (data.code == 200) {
            this.queryData = data.data;
          }
        });
    },
    chayan(isPass) {
      let obj = {
        isVerify: isPass,
        zdInfoId: this.zdInfoId,
        clientId: this.clientId,
        remark: this.remark
      };
      if (!obj.zdInfoId) {
        this.$message({
          message: "请上传pdf文件获取中登信息",
          type: "warning"
        });
        return false;
      }
      if (!obj.clientId) {
        this.$message({ message: "请选择供应商获取资产信息", type: "warning" });
        return false;
      }
      if (!obj.remark) {
        this.$message({ message: "请输入中登查验备注信息", type: "warning" });
        return false;
      }
      this.axios
        .post("AdminAPI/zdCheck/verifyZDCheck", obj)
        .then(({ data }) => {
          this.$router.push("centerQuery");
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val);
    }
  },
  watch: {
    search: function() {
      this.getList(1);
    }
  }
};
</script>

<style lang="scss">
#centerQueryfile {
  .messageSwdy {
    margin-top: 0 !important;
    position: relative;
    .bianji {
      position: absolute;
      right: 110px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      font-weight: 400;
      color: rgba(230, 69, 69, 1);
      cursor: pointer;
    }
  }
  .fileBtn {
    text-align: center;
    button {
      width: 400px;
      height: 50px;
      background: rgba(45, 178, 255, 1);
      box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
      border-radius: 10px;
      font-size: 22px;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      margin: 22px 0;
    }
    .img_input {
      position: absolute;
      left: -2000px;
      top: -100px;
    }
  }
  .tableBox {
    background: white;
    padding: 48px 76px;
    .leave {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 16px 0;
          &:nth-child(odd) {
            background: #fffaf3;
          }
        }
      }
    }
    .vertatic {
      width: 100%;
      border-collapse: collapse;
      color: #333333;
      tr {
        &:first-child {
          td {
            background: #fffaf3;
          }
        }
        td {
          text-align: center;
          border: 1px solid #dfdcdf;
          padding: 16px 0;
          .red {
            color: #e64545;
            cursor: pointer;
          }
        }
      }
    }
  }
  .bottomBtn {
    display: flex;
    justify-content: center;
    padding: 60px 0 30px;
    button {
      width: 251px;
      height: 50px;
      background: rgba(1, 101, 10, 1);
      box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
      border-radius: 10px;
      font-size: 22px;
      color: rgba(255, 255, 255, 1);
      &:first-child {
        margin-right: 240px;
      }
      &:last-child {
        background: rgba(30, 124, 240, 1);
        box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.5);
      }
    }
  }
  .swdyTops {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #b9b9b9;
    padding-bottom: 26px;
    .el-input {
      width: 160px;
    }
    .sousuo {
      margin: 0 40px;
    }
  }
  .diatable {
    margin-top: 10px;
    background: white;
    padding-top: 16px;
    .has-gutter tr th {
      background: #fefaf1;
    }
    .block {
      text-align: right;
      margin-right: 55px;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>
